<template>
  <div>
    <el-card class="organization">
     <template #header>
        <div class="card-header">
          <span span style='font-size:18px'><i class='iconfont icon-siweidaotu'></i> XX公司组织架构图</span>
        </div>
      </template>
      <el-input placeholder="输入部门"  v-model="filterText"></el-input>

      <div class='mytree' style="margin:15px 0 0 0;font-size:16px">
        <el-tree
          class="filter-tree mytree"
          :data="data"
          :props="defaultProps"
          default-expand-all
          icon-class='el-icon-star-off'
          :filter-node-method="filterNode"
          :render-content="renderContent"
          ref="tree">
        </el-tree>
      </div>

      <div align="center" style="margin:20px 0 0 0">
        <el-button type="primary" plain @click="f1">财政部</el-button>
        <el-button type="danger" plain @click="f2">市场部</el-button>
        <el-button type="warning" plain @click="f3">行政人事部</el-button>
        <el-button type="success" plain @click="f4">研发部</el-button>
      </div>
    </el-card>

    <TreasuryDepartment v-show="department1"/>

    <ApersonnelDepartment v-show="department3"/>

    <MarketingDepartment v-show="department2"/>

    <RDDepartment v-show="department4"/>

  </div>

</template>
<script lang="ts">
import ApersonnelDepartment from '/@/views/organization/Apersonnel_department/index.vue'
import MarketingDepartment from '/@/views/organization/Marketing_Department/index.vue'
import RDDepartment from '/@/views/organization/RD_department/index.vue'
import TreasuryDepartment from '/@/views/organization/treasury_department/index.vue'

 export default {
    components: { TreasuryDepartment, ApersonnelDepartment, MarketingDepartment, RDDepartment},
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      }
    },

    methods: {
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },

      f1(){
        this.department1 = !this.department1;
      },
      f2(){
        this.department2 = !this.department2;
      },
      f3(){
        this.department3 = !this.department3;
      },
      f4(){
        this.department4 = !this.department4;
      },
    },

    data() {
      return {
        filterText: '',
        department1: false,
        department2: false,
        department3: false,
        department4: false,
        data: [{
          id: 1,
          label: 'XX公司组织架构图',
          icon:'el-icon-success',
          children: [{
            id: 11,
            label: '市场部',
            icon: 'el-icon-info'
          },
          {
            id: 12,
            label: '财政部',
          },
          {
            id: 13,
            label: '研发部',
            children: [{
              id: 131,
              label: 'LIMS'
            }, {
              id: 132,
              label: '移动源'
            }, {
              id: 133,
              label: '自动监测'
            }]
          },
          {
            id: 14,
            label: '行政人事部',
          }
          ]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      };
    }
  };
</script>
<style lang="scss">
.organization{
  margin:0 0 20px 0;
}

.el-tree-node__label{
  font-size:16px;
}

.mytree {
  .el-tree .el-tree-node__expand-icon.expanded {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    .el-tree .el-icon-caret-right:before {
      content: "\e723";
      font-size:16px;
      color: #1389BC;
    }
    .el-tree .el-tree-node__expand-icon.expanded.el-icon-caret-right:before{
      content: "\e722";
      font-size: 16px;
      color: #1389BC;
   }
 }
</style>
